<template>
    <div class="container" @click="handleGallaryClick">
      <div class="wrapper">
        <swiper :options="swiperOption" >
          <!-- slides -->
          <swiper-slide v-for="(item,index) in imgs" :key="index" >
            <img class="gallary-img" :src="item">
          </swiper-slide>

          <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
      </div>
    </div>
</template>

<script>
    export default {
      name:'CommonGallary',
      props:{
        imgs:{
          type:Array,
          default(){
            return ['http://img1.qunarzz.com/sight/p0/1707/ab/abb70c851caaa6d8a3.img.jpg_350x240_ac7cc89d.jpg',
              'http://img1.qunarzz.com/sight/p0/1707/6b/6b30a503d2ec93a0a3.img.jpg_350x240_6371c024.jpg']
          }
        }
      },
        data(){
            return {
              swiperOption:{
                pagination : '.swiper-pagination',
                paginationType:'fraction',
                observer:true,
                observeParents:true,
              }
            }
        },
        methods: {
          handleGallaryClick(){
              this.$emit('close')
          }
        }
    }
</script>

<style lang="stylus" scoped>
  .container >>> .swiper-container
     overflow:inherit
  .container
    display: flex
    flex-direction: column
    justify-content:center
    position:fixed
    z-index 99
    left:0
    right:0
    top:0
    bottom:0
    background: #000
    .wrapper
      height:0
      width:100%
      padding-bottom:100%
      .gallary-img
        width:100%
      .swiper-pagination
        color: #fff
        bottom:-1.5rem
</style>
